import React, { useEffect, useRef, useState } from "react";
import {
  Input,
  Space,
  Button,
  Table,
  message,
  Popconfirm,
  Drawer,
  Form,
  InputNumber,
  Spin 
} from "antd";
import { AudioOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom";
import axios from "axios";

const { Search } = Input;

export default function Data() {
  const [data, setData] = useState("");
  const [delict, setDelict] = useState(false);
  const [visible, setVisible] = useState(false);
  const [face, setFace] = useState("");
  const [state, setstate] = useState(false);
  const history = useHistory();
  const [form] = Form.useForm();

  useEffect(() => {
    setstate(true);
    setTimeout(() => {
      axios.get("http://localhost:3004/From_data").then((res) => {
        setData(res.data);
        setstate(false);
      });
    }, 1000);
  }, [delict]);

  const onClose = () => {
    setVisible(false);
  };
  const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 16,
    },
  };
  /* eslint-disable no-template-curly-in-string */

  const validateMessages = {
    required: "${label} is required!",
    types: {
      email: "${label} is not a valid email!",
      number: "${label} is not a valid number!",
    },
    number: {
      range: "${label} must be between ${min} and ${max}",
    },
  };
  /* eslint-enable no-template-curly-in-string */

  const onFinish = (values) => {
    // console.log("text",values,"-----text",face);
    axios({
      method: "patch",
      url: `http://localhost:3004/From_data/${face.id}`,
      data: {
        ...values,
      },
    }).then((res) => {
      if (res) {
        console.log("修改成功");
      }
    });
  };

  // const edit_btn = (record) => {

  // };

  const columns = [
    {
      title: "商品名称",
      dataIndex: "name",
      key: "id",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "商品价格(元)",
      dataIndex: "price",
      key: "id",
    },
    {
      title: "商品重量",
      dataIndex: "weight",
      key: "id",
    },
    {
      title: "创建时间",
      key: "id",
      dataIndex: "time",
    },
    {
      title: "操作",
      key: "id",
      render: (text, record) => (
        <Space size="middle">
          <span
            style={{ cursor: "pointer" }}
            onClick={() => {
              console.log("21212-=-=-=", record);
              setVisible(true);
              setFace(record);

              new Promise((resolve) => {
                setTimeout(() => {
                  resolve(record);
                }, 0);
              }).then(() => {
                form.setFieldsValue({ ...record });
              });
            }}
          >
            编辑
          </span>
          <Popconfirm
            title="确定删除吗"
            okText="Yes"
            cancelText="No"
            onConfirm={() => {
              axios({
                method: "delete",
                url: `http://localhost:3004/From_data/${record.id}`,
              }).then((res) => {
                if (res.status === 200) {
                  message.success("删除成功");
                  setDelict(!delict);
                } else {
                  message.error("删除失败");
                }
              });
            }}
          >
            <a href="#">删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  const onSearch = (value) => {
    console.log(value);
  };

  const suffix = (
    <AudioOutlined
      style={{
        fontSize: 16,
        color: "#1890ff",
      }}
    />
  );

  return (
    <div>
      <div style={{ height: "55px", display: "flex", alignItems: "center" }}>
        <Space direction="vertical">
          <Search
            placeholder="请输入内容"
            allowClear
            suffix={suffix}
            size="large"
            onSearch={onSearch}
          />
        </Space>
        <Button
          type="primary"
          style={{ marginLeft: "8px" }}
          onClick={() => {
            history.push("/home/data/add_the_goods");
          }}
        >
          添加商品
        </Button>
      </div>
      <Drawer
        title="编辑商品"
        placement="right"
        onClose={onClose}
        visible={visible}
        extra={
          <Space>
            <Button onClick={onClose}>Cancel</Button>
            <Button type="primary" onClick={onClose}>
              OK
            </Button>
          </Space>
        }
      >
        <Form
          {...layout}
          style={{ width: "300px", margin: "50px auto" }}
          name="nest-messages"
          onFinish={onFinish}
          form={form}
          validateMessages={validateMessages}
        >
          <Form.Item
            name="name"
            label="商品名称"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="price"
            label="商品价格(元)"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="weight"
            label="商品重量"
            rules={[
              {
                required: true,
                type: "number",
                min: 0,
                max: 1000,
              },
            ]}
          >
            <InputNumber />
          </Form.Item>
          <Form.Item
            wrapperCol={{ ...layout.wrapperCol, offset: 8 }}
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Button type="primary" htmlType="submit" onClick={()=>{setVisible(false);setDelict(!delict);}}>
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
      <Table columns={columns} dataSource={data} loading={state} />
    </div>
  );
}
